<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" th:href="@{/plugin/easyui/themes/default/easyui.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/font-awesome.min.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/style_index.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/style_table.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/bootstrap.min.css}"/>
    <title>学生管理</title>
    <style>
        .display_none {
            display: none;
        }

        .operate a {
            margin: 10px 5px;
        }

        .populationAddressSearch {
            padding: 7px 16px;
        }

        .populationAddressReset {
            padding: 7px 16px;
            float: none;
        }

        .distance {
            margin-right: 20px;
        }

        html {
            overflow: scroll;
            overflow-x: hidden;
        }

        #pagebox {
            float: right;
            height: 28px;
            border-radius: 5px;
            border: 1px solid #dddddd;
            background-color: #fff;
        }

        #pageul {
            width: 100%;
            height: 100%;
        }

        #pageul li {
            display: block;
            float: left;
            height: 100%;
            cursor: pointer;
        }

        #zhuanye {
            float: left;
            line-height: 32px;
        }

        #datanumDiv {
            line-height: 32px;
            float: left;
            padding-right: 5px;
        }

        #datatotalDiv {
            line-height: 32px;
            float: right;
            padding-left: 5px;
        }

        /*前后页*/
        .first, .last {
            width: 35px;
        }

        .first {
            background: url(/images/first-1.png) center;
            border: 0px;
            border-right: 1px solid #dddddd;
            -webkit-transition: 0.7s all;
            -moz-transition: 0.7s all;
            -o-transition: 0.7s all;
            -ms-transition: 0.7s all;
        }

        .first:hover {
            background: url(/images/first-2.png) center
        }

        .last {
            background: url(/images/last-1.png) center;
            -webkit-transition: 0.7s all;
            -moz-transition: 0.7s all;
            -o-transition: 0.7s all;
            -ms-transition: 0.7s all;
        }

        .last:hover {
            background: url(/images/last-2.png) center;
        }

        .pages {
            width: 30px;
            line-height: 28px;
            text-align: center;
            color: #0077d6;
            border: 0px;
            border-right: 1px solid #dddddd;
            -webkit-transition: 0.7s all;
            -moz-transition: 0.7s all;
            -o-transition: 0.7s all;
            -ms-transition: 0.7s all;
        }

        .pages:hover {
            color: #333;
        }

        .on {
            color: #333;
        }

        .pre {
            background: url(/images/pre-1.png) center;
            width: 30px;
            border: 0px;
            border-right: 1px solid #dddddd;
            -webkit-transition: 0.7s all;
            -moz-transition: 0.7s all;
            -o-transition: 0.7s all;
            -ms-transition: 0.7s all;
        }

        .pre:hover {
            background: url(/images/pre-2.png) center;
        }

        .next {
            background: url(/images/next-1.png) center;
            width: 30px;
            border: 0px;
            border-right: 1px solid #dddddd;
            -webkit-transition: 0.7s all;
            -moz-transition: 0.7s all;
            -o-transition: 0.7s all;
            -ms-transition: 0.7s all;
        }

        .next:hover {
            background: url(/images/next-2.png) center;
        }

        .selectCenter {
            margin-top: 4px;
        }

    </style>
</head>
<body style="background:#f7f7f7;">
<div class="checkbox" style="display: flex;padding:5px 15px;">

    <!--内容-->
    <div class="systembox clear user-role-content">
        <div class="role_right" style="overflow-y: auto">
            <div class="heading_name">
                <h3>学生列表：</h3></div>
            <div style="padding:10px 15px;">
                <div class="btn-group role-btn" role="group" aria-label="..." style="width: 100%;">
                    <shiro:hasAnyRoles name="teacher,admin">
                        <button id="updateStudent" type="button" onclick="editStudent()" class="btn btn-default">修改</button>
                        <button id="deleteStudent" type="button" class="btn btn-default" onclick="doDelete()">删除</button>
                        <button id="parentInfo" type="button" onclick="getParentInfo()" class="btn btn-default">家长信息</button>
                    </shiro:hasAnyRoles>

                    <label>
                        <span>班级：</span>
                        <select id='class' name='classId' class="classId">
                            <option value="" selected>全部</option>
                        </select>
                    </label>
                    <div class="custom-search hidden-sm hidden-xs">
                        <input id="studentName" type="text" class="search-query" placeholder="请输入学生名 ...">
                        <i id="search" onclick="searchStudent()" class="fa fa-search"></i>
                    </div>
                </div>


                <table id="userDataGrid" width="100%" class="system_table role_table">
                    <thead>
                    <tr>
                        <th></th>
                        <th>姓名</th>
                        <th>学号</th>
                        <th>就读方式</th>
                        <th>所属班级</th>
                        <th>家庭住址</th>
                        <th>亲情号码</th>
                        <th>出生日期</th>
                    </tr>
                    </thead>
                    <tbody id="studentInfo">
                    </tbody>
                </table>
                <div style="overflow: hidden;">
                    <div id="zhuanye" style="margin-top: 10px;">
                        <div id="datanumDiv">显示</div>
                        <select id="rows" style="float:left;margin-top: 7px;" onchange="refresh()">
                            <option class="xialashu">15</option>
                            <option class="xialashu">30</option>
                            <option class="xialashu">50</option>
                        </select>
                        <div id="datatotalDiv">条记录</div>
                    </div>
                    <!--分页栏start-->
                    <div id="pagebox" style="margin-top: 10px;">
                        <ul id="pageul">
                            <li class="first" id="first" onclick="firstpage()"></li>
                            <li class="pre" id="pre" onclick="prePage()"></li>
                            <li class="pages on" id="page">1</li>
                            <li class="next" id="next" onclick="nextPage()"></li>
                            <li class="last" id="last" onclick="lastpage()"></li>
                            <li class="pages on" style="width:100px">共<span id="count"></span>条数据</li>
                        </ul>
                        <div style="clear:both;"></div>
                    </div>
                    <!--分页栏end-->
                </div>
            </div>
        </div>
    </div>

</div>
</body>
<script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{/plugin/easyui/jquery.easyui.min.js}"></script>
<script type="text/javascript" th:src="@{/js/bootstrap.min.js}"></script>
<script type="text/javascript" th:src="@{/js/bootstrap-paginator.js}"></script>
<script th:src="@{/plugin/layer/layer.js}" src="../static/plugin/layer/layer.js"></script>
<script th:inline="javascript">
    var studentId = null;
    var parent1Id = null;
    var parent2Id = null;
    $(function () {

        $(".rukuOnebtm").each(function () {
            var i = $(this);
            var p = i.find("li");
            p.click(function () {
                if (!!$(this).hasClass("select_click")) {
                    $(this).removeClass("select_click");
                } else {
                    $(this).addClass("select_click");
                }
            })
        });

        /*回车键*/
        $(document).keydown(function (e) {
            if (e.keyCode == 13) {
                searchStudent(15, 1);
            }
        });
        /*表格单击事件@author SYC*/
        $("#studentInfo").on('click', 'tr', function () {
            var $studentInfo = $("#studentInfo tr");
            /*清除上次选中行的颜色*/
            for (var i = 0; i < $studentInfo.length; i++) {
                $($studentInfo[i]).css("background-color", "rgb(255,255,255)");
            }
            //选中行的颜色
            $(this).css("background-color", "#4dabff");
            studentId = $(this).find("input[name = 'id']").val();
            parent1Id = $(this).find("input[name = 'parent1Id']").val();
            parent2Id = $(this).find("input[name = 'parent2Id']").val();
            console.log("StudentId:" + studentId);
            console.log("parent1Id:" + parent1Id);
            console.log("parent2Id:" + parent2Id);
        });


    });

    //页面加载就查询
    $(document).ready(function () {
        $.post("/class/getAllClass", function (data) {
            if (data.msg == 200) {
                for (var i = 0; i < data.classList.length; i++) {
                    $(".classId").append("<option value=" + data.classList[i].id + ">" + data.classList[i].className + "</option>");
                }
            } else {
                layer.msg(data.msg);
            }

        }, "json");
        //进入默认点击
        $("#search").click();

    });

    //获取家长信息
    function getParentInfo() {
        console.log(studentId);
        console.log(studentId != "" || studentId != null);
        console.log(parent1Id);
        console.log(parent1Id != "" || parent1Id != null);
        if (studentId == "" || studentId == null) {
            layer.msg("请选择一条学生数据！", {time: 2000});
        } else {
            if (parent1Id != "" || parent1Id != null) {
                sessionStorage.setItem("parent1Id", parent1Id);
                sessionStorage.setItem("parent2Id", parent2Id);
                var url = "/student/toStudentParentsInfo";
                parent.parent.openWindow("家长信息", ['500px', '500px'], url);
            }else{
                layer.msg("该学生未添加家长信息！", {time: 2000});
            }

        }
    }


    //打开编辑学生会话框
    function editStudent() {
        if (studentId == "" || studentId == null) {
            layer.msg("请选择一条学生数据！", {time: 2000});
        } else{
            sessionStorage.setItem("studentId",studentId);
            var url = "/student/toUpdateStudentPage";
            parent.parent.openWindow("修改学生", ['500px', '450px'], url);
        }

    }

    //查询学生方法
    function searchStudent(limit, page) {
        studentId = null;
        parent1Id = null;
        parent2Id = null;
        var postData = new Array();
        if (parent.isEmpty(limit) && parent.isEmpty(page)) {
            postData = {
                limit: 15,
                page: 1
            };
        } else {
            postData = {
                limit: limit,
                page: page
            };
        }

        postData.studentName = $("#studentName").val();

        postData.classId = $("#class").val();
        $.ajax({
            url: "/student/searchStudents",
            type: "post",
            data: JSON.stringify(postData),
            dataType: "json",
            headers: {'Content-Type': 'application/json'},
            success: function (data) {
                $("#studentInfo").empty();
                for (var i = 0; i < data.rows.length; i++) {
                    //var template = bindRole(data[i].rid);
                    var node = "<tr><td>"
                        + "<input name = 'id' class='display_none' value='"
                        + data.rows[i].id + "'>"
                        + "<input name='parent1Id' class='display_none' value='"
                        + data.rows[i].parent1Id + "'>"
                        + "<input name='parent2Id' class='display_none' value='"
                        + data.rows[i].parent2Id + "'>"
                        + (i + 1) + "</td><td>"
                        + data.rows[i].studentName + "</td><td>"
                        + data.rows[i].studentId + "</td><td>"
                        + data.rows[i].enrollmentType + "</td><td>"
                        + data.rows[i].privateStringClasses + "</td><td>"
                        + data.rows[i].address + "</td><td>"
                        + data.rows[i].familiarityNumber + "</td><td>"
                        + data.rows[i].birth + "</td></tr>";
                    $("#studentInfo").append(node);
                }
                $('#count').html(data.total);
                //countTotalByParams(postData);
            },
            error: function (error) {
                console.log(error);
            }
        });
    }

    //删除学生方法
    function doDelete() {
        if (studentId == "" || studentId == null) {
            layer.msg("请选择一条学生数据！", {time: 2000});
        } else{
            layer.confirm('确定删除？', function (r) {
                if (r) {
                    $.ajax({
                        url: "/student/deleteStudent",
                        type: "POST",
                        data: {
                            "id": studentId
                        },
                        dataType: "json",
                        contentType: "application/x-www-form-urlencoded;charset=utf-8",
                        success: function (result) {
                            if(result.msg === 200){
                                layer.msg("删除成功", {time: 1000});
                                searchStudent(15,1);
                            }else{
                                layer.msg("删除失败", {time: 1000});
                            }
                        },
                        error: function () {
                            document.getElementById("deleteStudent").onclick = doDelete;
                            layer.msg("系统出错", {time: 1000});
                        }
                    })
                }
            });
        }
    }

    function doQuery() {
        $('#page').text(1);
        searchStudent(15, 1);
    }


    /**
     * Description:分页  rows:显示条目数  page:当前第几页  count:总条目数
     */
    function nextPage() {
        if (parseInt($('#rows').val()) * ((parseInt($('#page').text())) + 1) - parseInt($('#count').text()) >= parseInt($('#rows').val())) {
            layer.msg("已到最后一页", {time: 1000});
        } else {
            $('#page').text(parseInt($('#page').text()) + 1);
            searchStudent($('#rows').val(), $('#page').text());
        }
    }

    function prePage() {
        if (parseInt($('#page').text()) == 1) {
            layer.msg("已到第一页", {time: 1000});
        } else {
            $('#page').text(parseInt($('#page').text()) - 1);
            searchStudent($('#rows').val(), $('#page').text());
        }
    }

    function firstpage() {
        if (parseInt($('#page').text()) == 1) {
            layer.msg("已到第一页", {time: 1000});
        } else {
            $('#page').text(1);
            searchStudent($('#rows').val(), $('#page').text());
        }
    }

    function lastpage() {
        if (parseInt($('#rows').val()) * ((parseInt($('#page').text())) + 1) - parseInt($('#count').text()) >= parseInt($('#rows').val())) {
            layer.msg("已到最后一页", {time: 1000});
        } else {
            $('#page').text(Math.ceil(parseInt($('#count').text()) / parseInt($('#rows').val())));
            searchStudent($('#rows').val(), $('#page').text());
        }
    }

    function refresh() {
        $('#page').text(1);
        searchStudent($('#rows').val(), 1);
    }


    $(document).ready(function () {
        var height = $(window).height() - 40;
        $(".checkbox").height(height);
    })

</script>
</html>
